// 仪表盘，讲师管理tab切换
var yibiaopan = document.querySelector('.yibiaopan')
var jiangshiguanli = document.querySelector('.jiangshiguanli')
var tuichu = document.querySelector('.tc')
var grzx = document.querySelector('.grzx')
var touxiang = document.querySelector('.touxiang')

// 仪表盘
yibiaopan.addEventListener('click', () => {
    yibiaopan.style.backgroundColor = '#233443'
    yibiaopan.style.color = '#f7f7f7'
    jiangshiguanli.style.backgroundColor = '#2f4050'
    jiangshiguanli.style.color = '#a9b0c2'
    $('.ybp').css('display', 'block')
    $('.liebiao').css('display', 'none')
    $('.right-top span').html('仪表盘')

    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/teacher/teacherlist',
        data: {},
        dataType: 'json',
        success: (a) => {
            $.ajax({
                type: 'get',
                url: 'http://47.94.4.201/index.php/index/teacher/teacherlist',
                data: {},
                dataType: 'json',
                success: a => {
                    var nan = 0
                    var nv = 0
                    a.data.data.forEach(item => {
                        if (item.sex == 0) {
                            nan++
                        } else if (item.sex == 1) {
                            nv++
                        }
                    })
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: 40,
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: nan, name: '男讲师' },
                                    { value: nv, name: '女讲师' },
                                ]
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                },
                error: e => {
                    console.log(e);
                }
            })
        },
        error: (e) => {
            console.log(e);
        }
    })
})

jiangshiguanli.addEventListener('click', () => {
    jiangshiguanli.style.backgroundColor = '#233443'
    jiangshiguanli.style.color = '#f7f7f7'
    yibiaopan.style.backgroundColor = '#2f4050'
    yibiaopan.style.color = '#a9b0c2'
    $('.ybp').css('display', 'none')
    $('.liebiao').css('display', 'block')
    $('.right-top span').html('讲师管理系统')
})

tuichu.addEventListener('click', () => {
    localStorage.removeItem('名字')
    localStorage.removeItem('头像')
    location.assign('./登录.html')
})

grzx.addEventListener('click', () => {
    $('.liebiao').css('display', 'none')
    $('.zhongxin').css('display', 'block')
    $('.grzx').css('backgroundColor', '#dbdbdb')
})

touxiang.addEventListener('click', () => {
    $('.liebiao').css('display', 'none')
    $('.add_zx').css('display', 'block')
})



// 讲师列表
// function apply() {
//     $.ajax({
//         type: 'get',
//         url: 'http://47.94.4.201/index.php/index/teacher/teacherlist',
//         data: {
//             page: 1,
//             pagelimit: 8
//         },
//         dataType: 'json',
//         success: (data) => {
//             var a = data.data.data
//             console.log(a);
//             $('.tbody').html('')
//             a.forEach(item => {
//                 $('.tbody').append(`
//                     <tr>
//                         <td>${item.id}</td>
//                         <td>${item.name}</td>
//                         <td>${item.nick}</td>
//                         <td>${item.birthdata}</td>
//                         <td>${item.sex}</td>
//                         <td>${item.iphone}</td>
//                         <td><button onclick='ck(${item.id})'>查&nbsp;看</button><button onclick='bj(${item.id})'>编&nbsp;辑</button><button onclick='del(${item.id})' class="sc">删&nbsp;除</button></td>
//                     </tr>`)
//             })
//         },
//         error: (e) => {
//             console.log(e);
//         }
//     })
// }
// apply()




// 分页

const apiUrl = "http://47.94.4.201/index.php/index/teacher/teacherlist";
let currentPage = 1;
const pageLimit = 8;

// 请求数据
async function fetchData(page) {
    if (page < 1) return;

    const response = await fetch(`${apiUrl}?page=${page}&pagelimit=${pageLimit}`);
    const result = await response.json();

    if (result.code === 0) {
        const dataList = result.data.data;
        const pageCount = result.data.pagecount;

        if (page > pageCount) return;

        currentPage = page;
        renderList(dataList);
        document.getElementById("current-page").innerText = currentPage;
        document.getElementById("total-pages").innerText = Math.ceil(pageCount / 8);
        $('tr:even').css('background-color', 'rgb(255, 255, 255)')
        $('tr:odd').css('background-color', 'rgb(249, 249, 249)')
    }
}

function renderList(data) {
    const dataListDiv = document.getElementById("data-list");
    data.forEach(item => {
        if (item.sex == 1) {
            item.sex = '女'
        } else if (item.sex == 0) {
            item.sex = '男'
        } else {
            item.sex = '其他'
        }
    })
    dataListDiv.innerHTML = data
        .map(item => `<tr>
           <td>${item.id}</td>
           <td>${item.name}</td>
           <td>${item.nick}</td>
           <td>${item.birthdata}</td>
           <td>${item.sex}</td>
           <td>${item.iphone}</td>
           <td><button onclick='ck(${item.id})'>查&nbsp;看</button><button onclick='bj(${item.id})'>编&nbsp;辑</button><button onclick='del(${item.id})' class="sc">删&nbsp;除</button></td>
 </tr>`)
        .join("");
}
fetchData(1); // 初始化加载第一页


// 查看
function ck(id) {
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/index/getteacherbyid',
        data: {
            id: id
        },
        dataType: 'json',
        success: (data) => {
            $('.chakan').css('display', 'block')
            var a = data.data
            console.log(a);
            $('.a1').html(a.name)
            $('.a2').html(a.nick)
            $('.a3').html(a.birthdata)
            $('.a4').html(a.iphone)
        },
        error: (e) => {
            console.log(e);
        }
    })
}

$('.cha').on('click', () => {
    $('.chakan').css('display', 'none')
})

// 搜索
function sousuo() {
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/teacher/getsearch',
        data: {
            name: $('.ss').val(),
            page: 1,
            pagelimit: 8
        },
        dataType: 'json',
        success: (data) => {
            var a = data.data.data
            a.forEach(item => {
                if (item.sex == 0) {
                    item.sex = '男'
                } else if (item.sex == 1) {
                    item.sex = '女'
                } else {
                    item.sex = '其他'
                }
            })
            console.log(a);
            $('#data-list').html('')
            a.forEach(item => {
                $('#data-list').append(`
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.nick}</td>
                        <td>${item.birthdata}</td>
                        <td>${item.sex}</td>
                        <td>${item.iphone}</td>
                        <td><button onclick='ck(${item.id})'>查&nbsp;看</button><button onclick='bj(${item.id})'>编&nbsp;辑</button><button onclick='del(${item.id})' class="sc">删&nbsp;除</button></td>
                    </tr>`)
            })
        },
        error: (e) => {
            console.log(e);
        }
    })
}

// 删除
function del(id) {
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/teacher/delteacher',
        data: { id: id },
        dataType: 'json',
        success: () => {
            fetchData(1)
        },
        error: (e) => {
            console.log(e);
        }
    })
}

// 编辑
var iid
function bj(id) {
    $('.bianji').css('display', 'block')
    $('.liebiao').css('display', 'none')
    iid = id
}
function bianji() {
    var sex
    var s1 = document.querySelectorAll('.inp1')
    s1.forEach(item => {
        if (item.checked == true) {
            sex = item.value
        }
    })

    $.ajax({
        type: 'post',
        url: 'http://47.94.4.201/index.php/index/index/upteacher',
        data: {
            id: iid,
            name: $('.bianji1').val(),
            sex: sex,
            birthdata: $('.bianji2').val()
        },
        dataType: 'json',
        success: (a) => {
            console.log(a);
            fetchData(1)
            $('.bianji').css('display', 'none')
            $('.liebiao').css('display', 'block')
        },
        error: (e) => {
            console.log(e);
        }
    })
}

// 添加
function tj() {
    $('.tianjia').css('display', 'block')
    $('.liebiao').css('display', 'none')
}
function tianjia() {
    var sex
    var s1 = document.querySelectorAll('.inp2')
    s1.forEach(item => {
        if (item.checked == true) {
            sex = item.value
        }
    })

    $.ajax({
        type: 'post',
        url: 'http://47.94.4.201/index.php/index/index/addteacher',
        data: {
            name: $('.tj1').val(),
            nick: $('.tj2').val(),
            sex: sex,
            birthdata: $('.tj3').val(),
            iphone: $('.tj4').val(),
            teachertype: $('.tj5').val(),
        },
        dataType: 'json',
        success: (a) => {
            console.log(a);
            fetchData(1)
            $('.tianjia').css('display', 'none')
            $('.liebiao').css('display', 'block')
        },
        error: (e) => {
            console.log(e);
        }
    })
}

// 添加个人中心
function add_zx() {
    localStorage.setItem('名字', JSON.stringify($('.add_zx .one input:eq(0)').val()))
    localStorage.setItem('头像', JSON.stringify($('.add_zx .one input:eq(1)').val()))
    localStorage.setItem('昵称', JSON.stringify($('.add_zx .one input:eq(2)').val()))
    localStorage.setItem('出生', JSON.stringify($('.add_zx .one input:eq(5)').val()))
    localStorage.setItem('号码', JSON.stringify($('.add_zx .one input:eq(6)').val()))
    localStorage.setItem('邮箱', JSON.stringify($('.add_zx .one input:eq(7)').val()))
    localStorage.setItem('入职', JSON.stringify($('.add_zx .one input:eq(8)').val()))

    var sex3
    var s3 = document.querySelectorAll('.inp4')
    s3.forEach(item => {
        if (item.checked == true) {
            sex3 = item.value
        }
    })

    $.ajax({
        type: 'post',
        url: 'http://47.94.4.201/index.php/index/index/mycenter',
        data: {
            name: $('.add_zx .one input:eq(0)').val(),
            userid: 2,
            nick: $('.add_zx .one input:eq(1)').val(),
            sex: sex3,
            birthdata: $('.add_zx .one input:eq(3)').val(),
            iphone: $('.add_zx .one input:eq(4)').val(),
            emails: $('.add_zx .one input:eq(5)').val(),
            indata: $('.add_zx .one input:eq(6)').val(),
        },
        dataType: 'json',
        success: (a) => {
            if (a.msg == '添加成功') {
                console.log(a);
                // location.reload()
            } else {
                alert('用户名重复或参数不能为空')
                console.log(a);
            }
        },
        error: (e) => {
            console.log(e);
        }
    })
}

function yingyong() {
    location.reload()
}


// 查看个人中心
function qd() {
    var name0 = JSON.parse(localStorage.getItem('名字'))
    var nick0 = JSON.parse(localStorage.getItem('昵称'))
    var birthdata0 = JSON.parse(localStorage.getItem('出生'))
    var iphone0 = JSON.parse(localStorage.getItem('号码'))
    var emails0 = JSON.parse(localStorage.getItem('邮箱'))
    var indata0 = JSON.parse(localStorage.getItem('入职'))
    var touxiang0 = JSON.parse(localStorage.getItem('头像'))
    document.querySelectorAll('.touxiang img').forEach(item => {
        item.src = touxiang0
    })
    document.querySelectorAll('.tou').forEach(item => {
        item.src = touxiang0
    })

    document.querySelector('.inps6').innerHTML = name0
    document.querySelector('.mingzi').innerHTML = name0
    document.querySelector('.inps1').value = nick0
    document.querySelector('.inps2').value = birthdata0
    document.querySelector('.inps3').value = iphone0
    document.querySelector('.inps4').value = emails0
    document.querySelector('.inps5').value = indata0

    var sex2
    var s2 = document.querySelectorAll('.inp3')
    s2.forEach(item => {
        if (item.checked == true) {
            sex2 = item.value
        }
    })

    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/index/getmycenter',
        data: {
            userid: 2,
        },
        dataType: 'json',
        success: (a) => {
            console.log(a);
        },
        error: (e) => {
            console.log(e);
        }
    })
}
qd()


// 渲染用户名
var user = JSON.parse(localStorage.getItem('name'))
document.querySelectorAll('.mingzi').forEach(item => {
    if (!localStorage.getItem('名字')) {
        item.innerHTML = user
    }
})


